<template>
  <a-collapse v-model:activeKey="currentKey">
    <a-collapse-panel v-for="(item, index) in editGroups" :key="`item-${index}`" :header="item.text">
      <prop-table :props="item.props" @change="handleChange" :mutationExtraData="{ isProps: true }"></prop-table>
    </a-collapse-panel>
  </a-collapse>
</template>

<script lang="ts" setup name="EditGroup">
import { storeToRefs } from 'pinia'
import { difference } from 'lodash-es'
import { type PropType, computed,ref, handleError } from 'vue'
import {type AllComponentProps} from 'p-test-comp-es'
import {defaultEditGroups} from '@/constant/defaultEditGroups'
import PropTable from '@/components/PropsTable.vue'

const emits = defineEmits(['change'])
const props = defineProps({
    props: {
        type: Object as PropType<AllComponentProps>,
        required: true
    },
    groups: {
        type: Array as PropType<GroupProps[]>,
        default: defaultEditGroups
    }
})
const currentKey = ref('item-0')
const newGroups = computed(()=>{
    const allNormalProps = props.groups.reduce((prev, current)=>{
        return [...prev, ...current.items]
    }, [] as string[])
    // tag 不能编辑，把它过滤掉
    allNormalProps.push('tag')
    allNormalProps.push('right')
    allNormalProps.push('position')

    const speicalProps = difference(Object.keys(props.props), allNormalProps)
    return [
        {text:'基础属性', items: speicalProps},
        ...props.groups
    ]
})
const editGroups = computed(()=>{
    return newGroups.value.map(group=>{
        const propsMap ={} as AllComponentProps
        group.items.forEach(item=>{
            const key = item as keyof AllComponentProps
            propsMap[key] = props.props[key]
        })
        return {
            ...group,
            props: propsMap
        }
    })
})
const handleChange=(e:any)=>{
    emits('change', e)
}
</script>

<style>
.create-component-list {
  position: relative;
  text-align: center;
  min-height: 400px;
  margin-left: auto;
  margin-right: auto;
}
</style>
